<template>
  <div>
    <h1>情况一：watch监视【ref】定义的【基本类型】数据</h1>
    <h2>求和{{ sum }}</h2>
    <h1>计数{{ count }}</h1>
    <button @click="changeSum">点我求和</button>
    <button @click="changeCount">点我计数</button>
  </div>
</template>

<script setup>
import { ref, watch } from "vue";

let sum = ref(0);
let count = ref(0);
function changeSum() {
  sum.value++;
}
function changeCount() {
  count.value++;
}
// watch监视数据--情况一：watch监视【ref】定义的【基本类型】数据
// watch(监视谁?,回调函数)监听数据变化;传递是一个函数fn
//watch会返回一个函数stop,调用这个函数可以停止watch监听
//watch(sum,(newV,oldV)=>{cls})
const stopWatch = watch(sum, (newVal, oldVal) => {
  console.log("sum变化了", newVal, oldVal); //sum变化了 1 0 ....
  if (newVal > 5) {
    stopWatch(); //停止监听
  }
});
console.log(stopWatch);
//监视ref是多个基本类型
watch([sum, count], (value) => {
  console.log(value);
});
/***
 * stopWatch函数内部实现() => {
    effect2.stop();
    if (scope && scope.active) {
      remove(scope.effects, effect2);
    }
  }
 */
</script>

<style scoped></style>
